Hafsa Documentation

Getting Started

Welcome

Thanks for purchasing our template :)

It is our great pleasure that you purchased our template. And we want to tell you that you don't need to write any codes for this template. Just follow some instructions for customizing the template.

If you have any questions, feel free to contact us at mailto:labartisan@labartisan.com.

Features

  • Home Pages
  • Total 15+ HTML Files
  • Fully responsive
  • Clear & Neat design
  • Bootstrap Based
  • Font Awesome Icon
  • Icofont Icon
  • Nice portfolio and Blog
  • Smooth animation
  • Browser compatibility (IE10+, Chrome, Safari, Firefox, Opera)
  • Well documented

Folder Arrange

Unzip the archive and find out the folder "buyer-file". There are all the template files in this folder. You can open the following files for viewing in browser.

  1. assets/css — folder with css files.
  2. assets/fonts — folder with icon fonts.
  3. assets/images — folder with image files.
  4. assets/js — folder with Javascript files.

  5. index.html — Home Page.
  6. about.html — About us Page.

  7. and Some other HTML Files
    8. .

Installation

01. FTP Upload

  • Open Your FTP manager and connect to your hosting
  • Browse to required directory(Normally public_html)
  • Upload the files inside buyer-file folder

02. Pages

  • index.html for Home Page
  • about.html for About Us
  • programs.html for Programs Page
  • program-single.html for Program Single Page
  • scholar.html for Scholar
  • scholar-single.html for Scholar Single Page
  • sermons.html for Sermons Single
  • services.html for Service Single
  • events.html for Events Page
  • events-single.html for Events Single Page
  • gallery.html for Gallery Page
  • blog-grid.html for Blog Grid Page
  • blog-single.html for Blog Details Page
  • login.html for Sign In Page
  • registration.html for Sign Up Page
  • contact.html for Contact Us
  • coming-soon.html for Coming Soon Page
  • error-page.html for Error Page

03. Fonts

      <!--Google Fonts-->
      
        https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap

05. Source File (CSS)

      <link rel="shortcut icon" type="image/x-icon" href="assets/images/x-icon/01.png">
      <link rel="stylesheet" href="assets/css/animate.css">
      <link rel="stylesheet" href="assets/css/bootstrap.min.css">
      <link rel="stylesheet" href="assets/css/all.min.css">
      <link rel="stylesheet" href="assets/css/icofont.min.css">
      <link rel="stylesheet" href="assets/css/lightcase.css">
      <link rel="stylesheet" href="assets/css/swiper.min.css">
      <link rel="stylesheet" href="assets/css/style.css">

06. Source File (JS)

      <script src="assets/js/jquery.js"></script>
      <script src="assets/js/fontawesome.min.js"></script>
      <script src="assets/js/waypoints.min.js"></script>
      <script src="assets/js/bootstrap.bundle.min.js"></script>
      <script src="assets/js/swiper.min.js"></script>
      <script src="assets/js/circularProgressBar.min.js"></script>
      <script src="assets/js/isotope.pkgd.min.js"></script>
      <script src="assets/js/lightcase.js"></script>
      <script src="assets/js/functions.js"></script>

Logo Type

To change logotype in the navigation panel, find image images/logo/01.png and replace it with your logo.

Note: Keep your logo inside the ./assets/imaegs/logo folder. The logo size should be minimum 215x56 pixel.

This is logo and navigation codes.

      <ul class="menu lab-ul">
        <li>
            <a href="index.html">Home</a>
        </li>
        <li>
            <a href="about.html">About</a>
        </li>
        <li>
            <a href="#0">Events</a>
            <ul class="submenu">
                <li><a href="events.html">Events</a></li>
                <li><a href="events-single.html">Events Single</a></li>
            </ul>
        </li>
        <li>
            <a href="#0">Programs</a>
            <ul class="submenu">
                <li> <a href="programs.html">Programs</a></li>
                <li><a href="program-single.html">Program Single</a></li>
            </ul>
        </li>
        <li>
            <a href="#0">Pages</a>
            <ul class="submenu">
                <li>
                    <a href="gallery.html">Gallery</a>
                </li>
                <li>
                    <a href="#0">Scholars</a>
                    <ul class="submenu">
                        <li><a href="scholar.html">Our Scholars</a></li>
                        <li><a href="scholar-single.html">Scholar Single</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#0">Blog</a>
                    <ul class="submenu">
                        <li><a href="blog.html">blog</a></li>
                        <li><a href="blog-single.html">Blog Single</a></li>
                    </ul>
                </li>
                <li><a href="sermons.html">Sermons</a></li>
                <li><a href="services.html" class="active">Service</a></li>
                <li><a href="404.html">404 Error</a></li>
                <li><a href="coming-soon.html">Coming-soon</a></li>
                <li><a href="registration.html">Registration</a></li>
                <li><a href="login.html">Login</a></li>
            </ul>
        </li>
        <li><a href="contact.html">Contact</a></li>
    </ul>

Here is your main logo code. To add your logo, replace logo.png from images/logo/ directory with your logo in PNG format.

<img src="assets/images/logo/01.png" alt="logo">

To change the tab heading you will need to edit in the tag <li>Here is your heading</li> and add your text in the middle of the tag.

To change the tab tagline you will need to edit in the tag <p>Here is your tagline</p> and add your text in the middle of the tag.

Which tab item you want to take as active you have to add active class to that "tab-item" class and li tag.



Section Styles

Here is your section structure.

      <section class="service-section padding-tb">
        <div class="container">
          <div class="row">					
            <div class="header-title">
              .....
            </div>
          </div>
          <div class="row">
          ...
          </div>
        </div>
      </section>

If you need another style of section header - just you add "left style"class

to section-header

In the class="section-class" you can replace with your desired class.

the class padding-top and padding-bottom is the space between each sections.

And in the section-header div you can add your heading of sections and tagline of sections.

You can add your content on the 2nd row div.



Section With Background

  <section class="section-class padding-tb">
    <div class="container">
      ...
    </div>
  </section>

you can select background color between light and dark color. To add cloud color, just simply add the class body-bg, section-bg to the section class.



Currencia Utility

You can use next modification classes to set block margins and paddings:


margin-top

mt-1 ... mt-5

margin-bottom

mb-1 ... mb-5

padding-top

pt-1 ... pt-5

padding-bottom

pb-1 ... pb-5



Contact Us Customization

Edit contact information in assets/contact.php — folder.


07. How to Change Contact Form Email

      $myemail = 'mailto:labartisan@labartisan.com';
  

      <div class="footer-bottom">
          <div class="container">
              <div class="row">
                  <div class="col-12">
                      <div class="footer-bottom-content text-center">
                          <p>©2020 <a href="index.html">Hafsa</a> -Best For Charity HTML Template.</p>
                      </div>
                  </div>
              </div>
          </div>
      </div>

Support

If you have any questions, feel free to contact us at mailto:labartisan@labartisan.com.